<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
      <!-- 插槽 -->
      <div v-if="tabs[0].isActive" slot="content">
        <div class="order_wrap">
          <div class="order_item">
            <div class="order_num order_row">
              <div class="left">订单编号</div>
              <div class="right">66666666666666666666</div>
            </div>
            <div class="order_price order_row">
              <div class="left">订单价格</div>
              <div class="right price">6666</div>
            </div>
            <div class="order_date order_row">
              <div class="left">订单日期</div>
              <div class="right">2020/02/22 下午18:00:00</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabs[1].isActive" slot="content">2</div>
      <div v-if="tabs[2].isActive" slot="content">3</div>
      <div v-if="tabs[3].isActive" slot="content">4</div>
    </Tabs>
  </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
  components: { Tabs },
  data() {
    return {
      tabs: [
        { id: 0, value: '全部订单', isActive: true },
        { id: 1, value: '待付款', isActive: false },
        { id: 2, value: '待发货', isActive: false },
        { id: 3, value: '退货/退款', isActive: false }
      ]
    }
  },
  methods: {
    // index是tabs组件传进来的
    onTabsItemChange(index) {
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false)
      })
    }
  },
  created() {
    console.log('created', this.tabs)
    const { type } = this.$route.query
    this.tabs.forEach((v, i) => {
      i === type - 1 ? (v.isActive = true) : (v.isActive = false)
    })
    this.$store.state.tabsIndex = type - 1
  }
}
</script>

<style lang='less' scope>
.order_wrap {
  .order_item {
    padding: 20rpx;

    .order_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;

      .left {
        flex: 2;
      }

      .right {
        flex: 5;
        text-align: right;
      }
      .price {
        color: var(--themeColor);
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }
}
</style>
